<template>
	<div class="discount_act">
		<x-header @on-click-back="forward" title="折扣商品活动" :left-options="{backText: '',preventGoBack:true}">
			<a slot="right" style="color: #fff;" @click="mustRead">创建必读</a>
		</x-header>
		<div class="content"></div>
		<!-- 创建必读阴影 -->
		<div class="mask" v-if="showShadow" @click="showShadow=false">
		</div>
		<div class="mask_contents" v-if="showShadow">
			<div class="mask_content">
				<div class="mask_title">创建必读</div>
				<div class="mask_concept">
					<div>
						<span>●</span>
						<p>单个门店支持多个此活动</p>
					</div>
					<div>
						<span>●</span>
						<p>此活动为在线支付专享活动</p>
					</div>
					<div>
						<span>●</span>
						<p>活动开始时间是指当日00:00:00</p>
					</div>
					<div>
						<span>●</span>
						<p>活动结束时间是指当日23:59:59</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { XHeader, Tab, TabItem } from 'vux';
	export default {
		name: 'discount_act',
		data() {
			return {
				showShadow: false,
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem
		},
		computed: {

		},
		created() {

		},
		methods: {
			//返回
			forward() {
				let self = this;
				this.$vux.confirm.show({
					content: '是否退出编辑活动',
					confirmText: '确认',
					onConfirm() {
						self.$router.go(-1);
					}
				})
			},
			//创建必读
			mustRead() {
				this.showShadow = true;
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.discount_act {		
		.mask {
			background: #000;
			opacity: .8;
			z-index: 9999;
			filter: opacity(80%);
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
		}
		.mask_contents {
			width: 5.4rem;
			height: 4rem;
			background: #fff;
			z-index: 99999;
			position: fixed;
			bottom: 0;
			right: 0;
			top: 0;
			left: 0;
			margin: auto;
			display: flex;
			flex-flow: column;
			.mask_content {
				overflow: auto;
				padding-bottom: .5rem;
			}
			.mask_title {
				width: 4.8rem;
				padding: .5rem 0 .15rem 0;
				font-size: .36rem;
				color: #242424;
				font-weight: 700;
				margin: 0 auto;
				border-bottom: 1px solid #f0f0f0;
			}
			.mask_concept {
				padding-top: .25rem;
				>div {
					width: 4.8rem;
					margin: .2rem auto 0 auto;
					text-align: left;
					font-size: .28rem;
					color: #323232;
					display: flex;
					align-items: center;
					span {
						margin-right: .18rem;
					}
				}
			}
		}
	}
</style>